<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Konversi Kode HTML | SF-Destroyer</title>
<style type="text/css">
a.konversi-button{border:1px solid #ddd;color:#666;font:italic 12px &#39;Audiowide&#39;, cursive;cursor:pointer;font-weight:400;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#fff;padding:5px;text-align:center}
#konversi-box, #hide-konversi {display:none}
#konversi-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:15px;padding:0;text-align:left;}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;}
#codes{border:1px solid #ddd;width:96%;height:200px;display:block;background-color:#fff;border-radius:3px;font:normal 12px &#39;Courier New&#39;,Monospace;margin:7px 0 10px;padding:5px}
#codes:focus{background-color:#fff;color:#000;border:1px solid #ddd}
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{background-color:#464646;font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;color:#fff;border:none;border-radius:3px;cursor:pointer;padding:5px 10px}
button:hover{background-color:#A8A8A8;color:#000}
button:active{background-color:#A8A8A8;color:#000}
button[disabled],button[disabled]:active{background-color:#A8A8A8;color:#000;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}
        #show-konversi, #hide-konversi{width:200px;}
</style>
</head>
<body>
<textarea spellcheck="false" id="codes" placeholder="Silahkan klik kolom 'Bersihkan'Terlebih dahulu  kemudian Paste Code disini lalu Klik 'Konversi'"></textarea>
<div class="button-group">
<button disabled="disabled" id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button>
<button onclick="cdClear();">Bersihkan</button>
</div>
<p>
<input checked="checked" id="opt1" type="checkbox">Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code><br>
<input id="opt2" type="checkbox">Konversi <code>'</code> menjadi <code>&amp;#039;</code><br>
<input id="opt3" type="checkbox">Konversi <code>"</code> menjadi <code>&amp;quot;</code><br>
<input checked="checked" id="opt4" type="checkbox">Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code><br>
<input checked="checked" id="opt5" type="checkbox">Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code>
</p>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
        cv = cv.replace(/^/, "<i rel=\"pre\">");
    } else {
        cv = cv.replace(/^/, "<i rel=\"code\">");
    }
    cv = cv.replace(/$/, "</i>");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>


    </body></html>